<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">{{date|formateDate('yyyy-mm-dd hh-mi-ss')}}</div>
    <script type="text/javascript" src="../lib/vue.js"></script>
    <script type="text/javascript">
      // Vue.filter('formateDate', function (msg, pattern = '') {
      // var mt = new Date(msg)
      // // 获取年份
      // var y = mt.getFullYear()
      // // 获取月份 从0开始
      // var m = (mt.getMonth() + 1).toString().padStart(2, '0')
      // // 获取天数
      // var d = mt.getDate()
      // if (pattern === 'yyyy-mm-dd') {
      //   return y + '-' + m + '-' + d
      // }
      // // 获取小时
      // var h = mt.getHours().toString().padStart(2, '0')
      // // 获取分钟
      // var mi = mt.getMinutes().toString().padStart(2, '0')
      // // 获取秒
      // var s = mt.getSeconds().toString().padStart(2, '0')
      // // 拼接为我们需要的各式
      // return y + '-' + m + '-' + d + ' ' + h + ':' + mi + ':' + s
      // })
      new Vue({
        el: '#app',
        data: {
          date: '事件',
        },
        filters: {
          formateDate: function (msg, pattern = '') {
            var mt = new Date(msg)
            // 获取年份
            var y = mt.getFullYear()
            // 获取月份 从0开始
            var m = (mt.getMonth() + 1).toString().padStart(2, '0')
            // 获取天数
            var d = mt.getDate()
            if (pattern === 'yyyy-mm-dd') {
              return y + '-' + m + '-' + d
            }
            // 获取小时
            var h = mt.getHours().toString().padStart(2, '0')
            // 获取分钟
            var mi = mt.getMinutes().toString().padStart(2, '0')
            // 获取秒
            var s = mt.getSeconds().toString().padStart(2, '0')
            // 拼接为我们需要的各式
            return y + '-' + m + '-' + d + ' ' + h + ':' + mi + ':' + s
          },
        },
      })
    </script>
  </body>
</html>
